.app-config-page {
  @apply min-h-screen bg-gray-50;
}

/* 页面头部 */
.page-header {
  @apply bg-white border-b border-gray-200 px-6 py-4;
}

.header-content {
  @apply flex items-center justify-between max-w-7xl mx-auto;
}

.header-left {
  @apply flex items-center gap-4;
}

.header-icon {
  @apply text-2xl text-blue-600;
}

.page-title {
  @apply text-2xl font-bold text-gray-900 mb-1;
}

.page-description {
  @apply text-gray-600 text-sm mb-0;
}

.header-actions {
  @apply flex items-center gap-3;
}

/* 页面内容 */
.page-content {
  @apply max-w-7xl mx-auto p-6;
}

.config-card {
  @apply bg-white rounded-lg shadow-sm border border-gray-200;
  min-height: 400px;
}

/* 配置内容 */
.config-content {
  @apply p-6;
}

.config-header {
  @apply flex items-center justify-between mb-4;
}

.config-title {
  @apply flex items-center gap-3;
}

.config-title h3 {
  @apply text-xl font-semibold text-gray-900 mb-0;
}

.config-status {
  @apply flex items-center gap-2;
}

.config-details {
  @apply space-y-4;
}

.config-row {
  @apply flex items-start py-3 border-b border-gray-100 last:border-b-0;
}

.config-label {
  @apply w-32 text-sm font-medium text-gray-600 flex-shrink-0;
}

.config-value {
  @apply flex-1 text-sm text-gray-900;
}

.config-value code {
  @apply bg-gray-100 px-2 py-1 rounded text-xs font-mono;
}

.config-list {
  @apply flex flex-wrap gap-2;
}

.config-tag {
  @apply bg-blue-50 text-blue-700 border-blue-200;
}

.config-empty {
  @apply text-gray-500 italic;
}

/* 空状态 */
.config-empty-state {
  @apply text-center py-16;
}

.empty-icon {
  @apply text-6xl text-gray-300 mb-4;
}

.config-empty-state h3 {
  @apply text-xl font-semibold text-gray-900 mb-2;
}

.config-empty-state p {
  @apply text-gray-600 mb-6;
}

/* 编辑弹窗 */
.edit-config-modal .ant-modal-body {
  @apply p-6;
}

.config-form {
  @apply space-y-4;
}

.config-form .ant-form-item {
  @apply mb-4;
}

.config-form .ant-form-item-label > label {
  @apply font-medium text-gray-700;
}

.config-form .ant-form-item-explain-error {
  @apply text-red-500 text-xs mt-1;
}

.form-actions {
  @apply flex justify-end pt-4 border-t border-gray-200 mt-6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    @apply px-4 py-3;
  }
  
  .header-content {
    @apply flex-col items-start gap-3;
  }
  
  .header-actions {
    @apply w-full justify-end;
  }
  
  .page-content {
    @apply p-4;
  }
  
  .config-content {
    @apply p-4;
  }
  
  .config-row {
    @apply flex-col items-start gap-2;
  }
  
  .config-label {
    @apply w-full font-semibold;
  }
  
  .edit-config-modal {
    @apply mx-4;
  }
  
  .edit-config-modal .ant-modal {
    @apply max-w-none;
  }
}

/* 加载状态 */
.config-card .ant-spin-container {
  @apply min-h-96;
}

/* 密码显示/隐藏按钮 */
.config-value .ant-btn-text {
  @apply text-blue-600 hover:text-blue-700 hover:bg-blue-50;
  padding: 2px 6px;
  height: auto;
  font-size: 12px;
}

/* 表单样式优化 */
.config-form .ant-input,
.config-form .ant-input-password {
  @apply border-gray-300 hover:border-blue-400 focus:border-blue-500;
}

.config-form .ant-input:focus,
.config-form .ant-input-password:focus {
  @apply shadow-sm;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.config-form .ant-form-item-has-error .ant-input,
.config-form .ant-form-item-has-error .ant-input-password {
  @apply border-red-400;
}

/* 标签样式 */
.ant-tag {
  @apply border-0 rounded-md px-2 py-1 text-xs font-medium;
}

.ant-tag.ant-tag-blue {
  @apply bg-blue-100 text-blue-800;
}

.ant-tag.ant-tag-green {
  @apply bg-green-100 text-green-800;
} 